body{font:14px"微软雅黑","Arial Narrow",HELVETICA;overflow: hidden;}
.mui-content{padding-bottom:50px;overflow: hidden;}
.main-body {background-color: #efeff4; height:auto; width: 100%;overflow-y: scroll;} 
.mui-footer{height:50px; width:100%; position:fixed; bottom:0px; background: #f7f7f7;}
.mui-footer.toh{height:250px;}
.mui-footer-bar{height:50px;width:100%;border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;line-height: 50px;}
.mui-footer-bar .icon{width:38px;height:38px;line-height: 38px;margin-top:6px;display: block;border:1px solid #848484;border-radius: 45px;text-align: center;}
.mui-footer-bar .icon i{font-size:20px;color:#848484;}
.mui-footer-bar .icon.icon-left{position: absolute;float:left;margin-left:12px;}
.mui-footer-bar .icon.icon-right{position: absolute;float:right;margin-right:12px;right:0px;}
.mui-footer-input{padding-left:55px; padding-right:55px; float: left; width: 100%; height: 38px; margin-top: 6px; line-height: 38px; } 
.mui-footer-input input{width: 100%; height: 32px; outline: none; border: none;border-radius: 0px; font-size: 18px; color: #333; background-color:transparent; line-height: 32px; padding:0px 20px; margin-bottom:0px; border-bottom:1px solid #22af3a;text-align: left; }
.mui-footer-input.tob{padding-left:60px; padding-right:60px; float: left; width: 100%; height: 38px; margin-top: 9px; line-height: 38px;} 
.mui-footer-input.tob input{display:none;}
.mui-footer-input button{width: 100%; height: 32px; outline: none; border:1px solid #e0e0e0;border-radius: 5px; font-size: 18px; color: #333; background-color:transparent; line-height: 32px; padding:0px 20px; margin-bottom:0px;text-align: center;}
.mui-footer-bar .button.icon-right{position: absolute;float:right;margin-right:6px;right:0px;margin-top: 5px;padding: 8px 7px;background-color: #1db937;border: 0.1em solid #07af24;}
.mui-footer-tool{height:200px;width:100%;padding:0px;margin:0px;background: #efeff4;overflow: hidden;}
.mui-footer-tool li{list-style: none;float:left;width:17%;margin-left:4%;margin-right:4%;margin-top:20px;height:56px;line-height: 56px;text-align: center;border:1px solid #d2d2d2;border-radius: 15px;background: #f7f7f7;}
.mui-footer-tool li .iconfont{font-size: 33px;color:#8f8f94;}
.mui-footer-tool li .text{line-height: 14px;font-size: 14px;color: #8f8f94;}

.mui-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0,0,0,.3); }
.mui-backdrop img{margin:auto;margin-top:40%;width:80%;display: block;}
.noselect {

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Chrome/Safari/Opera */

-khtml-user-select: none; /* Konqueror */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently not supported by any browser */

}
/*聊天输出*/
.chatRoomTip {text-align: center; padding: 10px; font-size: 12px; color: #444; }
.clearfix {zoom: 1; } 
.clearfix:after {clear: both; content: '.'; display: block; width: 0; height: 0; visibility: hidden; }
.user {
    width: 100%;
    min-height: 38px;
    min-width: 36px;
    margin-bottom: 24px;
}

.user span {
    width:50px;
    height:50px;
    margin-right: 10px;
    float: right;
}
.user p.name{
    width:auto;
    text-align: right;
    margin-bottom: 4px;
}
.user span.sound{
    width:auto;
    height:20px;
    text-align: right;
    margin-bottom: 4px;
    margin-top: 33px;
    font-size:16px;
}

.user div {
    float: right;
    min-height: 30px;
    min-width: 38px;
    max-width: 70%;
    line-height: 30px;
    padding: 5px 15px;
    color: #171717;
    border: 1px solid #4fb543;
    margin-right: 15px;
    margin-top:23px;
    word-break: break-all;
    background-color: #4ee43c;
    position: relative;
    border-radius: 5px;
}

.user .mess-img{
    margin-top: 5px;
    max-width:80px;
    max-height: 80px;
}
.user .user-img{
    width:50px;
    height:50px;
}
.user i.sound{
    color:#444444;
    float: right;
}

.user div:after {
    content: "";
    position: absolute;
    right: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: solid transparent;
    border-left: 9px solid #4ee43c;
    border-bottom: 6px solid transparent;
}

.server {
    width: 100%;
    min-height: 38px;
    min-width: 36px;
    margin-bottom: 15px;
}

.server span {
    width:50px;
    height:50px;
    margin-left: 10px;
    float: left;
}

.server span.sound{
    width:auto;
    height:20px;
    text-align: right;
    margin-bottom: 4px;
    margin-top: 33px;
    font-size:16px;
}

.server p.name{
    width:auto;
    text-align: left;
    margin-bottom: 4px;
}

.server div {
    float: left;
    min-height: 30px;
    min-width: 38px;
    max-width: 70%;
    line-height: 30px;
    padding: 5px 15px;
    color: #171717;
    border: 1px solid #e0e0e0;
    margin-left: 15px;
    margin-top:23px;
    word-break: break-all;
    background-color: #ffffff;
    position: relative;
    border-radius: 5px;
}

.server .mess-img{
    margin-top: 5px;
    max-width:80px;
    max-height: 80px;
}
.server .user-img{
    width:50px;
    height:50px;
}
.server i.sound{
    color:#444444;
    float: left;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);     /* IE 9 */
    -moz-transform:rotate(180deg);    /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg);  /* Opera */
}

.server div:after {
    content: "";
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: solid transparent;
    border-right: 9px solid #ffffff;
    border-bottom: 6px solid transparent;
}